<template>
	<!-- 进货单 -->
	<div>
		<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{path:'/erp/purchase'}">进货单列表</el-breadcrumb-item>
			<el-breadcrumb-item>进货单详情</el-breadcrumb-item>
		</el-breadcrumb>
		<nav class="nav">
			<el-button size="small" icon='plus' @click="detail" type="primary">修改</el-button>
		</nav>
		<div class="order_seek">
			<div class="crux">
				<div class="seek_l">
					<div>单据编号：</div>
					<el-input v-model="params.receiptNumber" placeholder="流水号" size="small" clearable/>
				</div>
				<div class="seek_l">
					<div>发票编号：</div>
					<el-input v-model="params.invoiceNumber" placeholder="流水号" size="small" clearable/>
				</div>
				<div class="seek_l">
					<div>收付款凭证号：</div>
					<el-input v-model="params.paymentNumber" placeholder="流水号" size="small" clearable/>
				</div>
				<div class="seek_l">
					<div>下单日期：</div>
					<el-date-picker v-model="params.orderDate" type="date" value-format="timestamp" size="small" placeholder="选择日期">
					</el-date-picker>
				</div>
				<div class="seek_l">
					<div>客户名称：</div>
					<el-input v-model="params.supplierName" size="small" clearable/>
				</div>
				<div class="seek_l">
					<div>联系人/电话：</div>
					<el-input v-model="params.supplierContactOrPhone" size="small" clearable/>
				</div>
			</div>
		</div>
		<el-table :summary-method="utils.getERPSummariesGoods" show-summary border :data="goodsArr" style="width: 100%" max-width="1000">
			<el-table-column prop="id" label="分录号" fixed show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="goodsName" label="商品名称" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="qty" label="数量"></el-table-column>
			<el-table-column prop="unit" label="单位"></el-table-column>
			<el-table-column prop="amount" label="金额"></el-table-column>
			<el-table-column prop="tax" label="税率"></el-table-column>
		</el-table>
		<el-pagination class="page-num" background layout="prev, pager, next" :page-size="page_size" @current-change="handleCurrentChange" :total="page">
		</el-pagination>
	</div>
</template>
<script>
export default {
	name: 'manage',
	data() {
		return {
			title: '',
			date: '',
			goodsArr: [],
			params: {
				"numPerPage": 10,		//每页记录数
				"order": "desc",			//排序顺序asc,desc
				"pageNum": 1,		//当前页数
				"startDate": "",		//开始时间
				"endDate": "",		//结束时间
				"sort": "",			//排序字段
				"supplierName": ""	//供应商名称
			},
			form: {
				"amount": 1,				//金额
				"exchangeRate": 10,			//汇率
				"invoiceNumber": "11",		//发票编号
				"paymentNumber": "1",		//收付款凭证号
				"qty": 1,					//数量
				"receiptNumber": "1",		//单据编号
				"stockInType": "RECEIPT",	//类型
				"supplierContact": "11",	//供应商联系人
				"supplierId": 1,			//供应商Id
				"supplierMobile": "32",		//供应商手机
				"supplierName": "3132",		//供应商
				"packQty": 3,				//件数
				"remark": "1",				//备注
				"warehouseName": "1",		//仓库
				"stockInItems": [
				],
			},
			page_size: 10, //每页显示几个
			page: 0, //总页数
			currentPage: 1, //当前页
		};
	},
	components: {

	},
	created() {

	},

	mounted() {
		this.getList();
	},
	methods: {
		/*分页跳转*/
		handleCurrentChange: function (currentPage) {
			this.currentPage = currentPage;
			this.getList();
		},
		// 获取列表
		getList() {
			this.$post("stockInDetails", {
				id: this.$route.params.id
			}).then(res => {
				this.form = res.data;
				if (res.code == 200) {
					this.goodsArr = [];
					var list = res.data.stockInItems;
					for (var i in list) {
						this.goodsArr.push(list[i]);
					}
				} else {
					this.$msg.warning(res.message);
				}
			});
		},
		add() {
			this.$router.push('addPurchase');
		},
		// 跳转详情页面
		detail(id) {
			
			this.$router.push({
				name: 'updatePurchase',
				params: {
					id: this.$route.params.id
				}
			})
		}
	},
}
</script>
<style lang="less" scoped>
.nav {
  display: flex;
  justify-content: flex-end;
}

.order_seek {
  background-color: #f6f6f6;
  border: 1px solid #dddddd;
  margin-top: 15px;
  overflow: hidden;
  margin-bottom: 18px;
  line-height: 50px;
  .crux {
    display: flex;
    flex-wrap: wrap;
    padding: 4px 9px;
    .seek_l {
      display: flex;
      width: 260px;
      flex-direction: row;
      justify-content: space-between;
      padding-left: 10px;
      > div {
        width: 120px;
      }
      .el-input {
        flex: 1;
      }
      .el-button {
        width: 100px;
        height: 30px;
        margin: 10px 0;
      }
    }
    .z_s_list {
      overflow: hidden;
      float: left;
      margin-left: 33px;
    }
  }
}
</style>